<template>
  <div>
      <div v-if="cityData.dropList">
        <p @click="show" class="span" > 省份   </p> <span class="select" @click="good">筛选</span>
        <ul class="nav-city"  v-show="state.flag">
        <li v-for="item in cityData.dropList[0].data" :key="item.id">
            {{item.name}}
        </li>
      </ul>
      </div>
      <div class="right" v-bind:class="{active:state.good}">
        <ul class="rightpage" v-for="(item,index) in cityData.rankItemGroup"  :key='index'>
           <div>{{item.name}}</div>
            <li v-for="(items,index) in item.list" :key='index' @click="rank(items.name,index,items.id)" 
             v-bind:class="{bei:items.islight}"
           >
             {{items.name}}  
            </li>       
      </ul>          
      <van-button type="info" @click='info'>信息按钮</van-button>
      </div>
      <div class="arm" >
            排名
      </div>
      <div class="conright">
          <div class="outsize">
            <ul class="main">
              <li v-for="(item)  in cityData.rankItemList" :key="item.id">
                  {{item.name}}
              </li>
          </ul>  
          </div>
      </div>

      <ul v-for="item in rankingData" :key="item.id" class="tank">
        <div class="ul">
          <span>{{item.name}}</span> 
          <li v-for="(items,index) in item.scores" :key="index">
               {{items.score}}
          </li>
        </div>  
      </ul>
      <!-- {{rankingData}} -->
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, defineComponent,reactive,ref,onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
     setup(){
         const store = useStore();
         const state = reactive({
             flag:false,
             good:true,
             //curIndex:0,
            context:[],
              rankId: "",
      mid: "022c8c3d2d624f3e9e4b5c5a024e0200",
      drops: "",
      Name:'value'
         })
   
    let { rankId, mid, drops,Name } = state;
   
    store.dispatch("home/getDetailList", {
      rankId: useRoute().params.id,
      mid,
      
      
    });
     store.dispatch("home/getDropList", {
      rankId: useRoute().params.id,
      mid,
      
     
    });
         const show=()=>{
            state.flag = !state.flag
            
         }
         const good =()=>{
             
             state.good = !state.good
             console.log(222,state.good)
         }
         const info = () =>{
            store.commit("home/saveData",state.context )  
         }
         const rank = (item,index,id)=>{
              state.context.push(item);
         
              let obj = {
                 arr: state.context,
                 id: id
              }
              store.commit("home/updateData",obj)
          
         }
        
         return {
           cityData:computed(()=>store.state.home.cityData), 
           rankingData:computed(()=>store.state.home.rankingData),
           show,
           state,
           good,
           rank,
           info
         }
     }
}
</script>

<style>
.nav-city{
    float: left;
    
   
}
.select{
    float: right;
}
.span{
    text-align: left;
    display:inline-block;
    width: 90%;
    
}
div .bei{
    background-color: cornflowerblue;
}
.active {
    position:fixed;
    left: 100%;
    top: -10%;
    margin-bottom: 10rem;
}
 
.rightpage {
    width: 100%;
    height: 0.1rem;
    margin-top: 8rem;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
   
    
}

.ul {
    width: 190%;
    height: 1.3rem;
    margin-top: 1rem;
}
.ul li{
    float: left;
    margin-left: 1rem;
}
.ul span{ 
    
    display: inline-block;
    margin-right: 0.3rem;
    display: flex; 
}
 /* .active {
    position: fixed;
    top:0%;
    left: 200%;
    background-color: pink;
    background-color: chocolate;
} */
.rightpage div{
    display: block;
    width: 100%;
}
.rightpage li {
    width: 40%;
    margin-left: 2rem;
    margin-top: 0.1rem;
    border: 0.01rem solid blue;
    display: inline-block;
   
}
.main li{
   
   height: 2.9rem;
   width: 5.9rem;
   text-align: left;
   
} 
.main {
    width: 250%;
    display: flex;
    margin-left: 5rem;
    
}    

.conright{
    overflow: scroll;
}
.arm{
    float: left;
} 
.tank{
  overflow: scroll;
  width: 100%;
}  
</style>